<template>
    <div class="" :style="isChange ? 'display: none;' : ''">
        <div class="show_project">
            <div class="show_project_msg">
                <el-descriptions>
                    <el-descriptions-item label="项目名称">{{name}}</el-descriptions-item>
                    <el-descriptions-item label="客户公司名称">{{projectName}}</el-descriptions-item>
                    <el-descriptions-item label="品牌名称">{{brands}}</el-descriptions-item>
                    <el-descriptions-item label="客户负责人">{{brandsUsername}}</el-descriptions-item>
                    <el-descriptions-item label="品名">{{productName}}</el-descriptions-item>
                    <el-descriptions-item label="品类">{{showMsg.cates}}</el-descriptions-item>
                    <el-descriptions-item label="区域">{{showMsg.areas}}</el-descriptions-item>
                    <el-descriptions-item label="商务">{{bussinessUsername}}</el-descriptions-item>
                    <el-descriptions-item label="执行负责人">{{permissionUsername}}</el-descriptions-item>
                    <el-descriptions-item label="合同编号">{{showMsg.orderNo}}</el-descriptions-item>
                    <el-descriptions-item label="备注">{{showMsg.projectRemark}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="cost_item_solid" v-if="showMsg.failTime"></div>
        <div class="show_project" v-if="showMsg.failTime">
            <div class="show_project_msg">
                <el-descriptions title="黄单信息" :column="2">
                    <el-descriptions-item label="黄单时间">{{showMsg.failDate}}</el-descriptions-item>
                    <el-descriptions-item label="黄单原因">{{showMsg.failReason}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="cost_item_solid" v-if="operationList.includes('editInvoice')"></div>
        <div class="show_project" v-if="operationList.includes('editInvoice')">
            <div class="show_project_msg">
                <el-descriptions title="" :column="2">
                    <el-descriptions-item label="开票公司">{{showMsg.invoiceCompanyName}}</el-descriptions-item>
                    <el-descriptions-item label="开票金额">{{showMsg.invoicePrice}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="cost_item_solid" v-if="operationList.includes('editGoodArrival')"></div>
        <div class="show_project" v-if="operationList.includes('editGoodArrival')">
            <div class="show_project_msg">
                <el-descriptions title="">
                    <el-descriptions-item label="到货进度">{{showMsg.goodArrivalStatus}}</el-descriptions-item>
                    <el-descriptions-item label="到货详情">{{showMsg.goodArrivalMsg}}</el-descriptions-item>
                    <el-descriptions-item label="执行进度">{{showMsg.executionProgressName}}</el-descriptions-item>
                    <!-- <el-descriptions-item label="到货日期">{{showMsg.arrivalTime}}</el-descriptions-item> -->

                    <el-descriptions-item label="到货状态">{{showMsg.arrivalProgressName}}</el-descriptions-item>
                    <el-descriptions-item label="到货仓库">{{showMsg.arrivalWarehouseName}}</el-descriptions-item>
                    <el-descriptions-item label="到货百分比">{{ hasArrivalRate + '%' }}</el-descriptions-item>

                </el-descriptions>
            </div>
        </div>
        <div class="cost_item_solid"></div>
        <div class="show_project">
            <div class="show_project_msg">
                <el-descriptions title="" :column="2">
                    <el-descriptions-item label="项目货值">{{showMsg.projectTotalPrice}}</el-descriptions-item>
                    <el-descriptions-item label="内部货值">{{showMsg.innerTotalPrice}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="cost_item_solid"></div>
        <div class="show_project" v-if="!userInfo.role.includes(40)">
            <div class="show_project_msg">
                <el-descriptions title="" :column="2">
                    <el-descriptions-item label="预估成本">{{showMsg.estimatedCost}}</el-descriptions-item>
                    <el-descriptions-item label="实际成本">{{showMsg.actualCost}}</el-descriptions-item>
                    <el-descriptions-item label="盲盒应收">{{showMsg.blindPrice}}</el-descriptions-item>
                    <el-descriptions-item label="盲盒实收"
                        v-if="operationList.includes('editActualValuePrice')">{{showMsg.blindRealPrice}}</el-descriptions-item>
                    <el-descriptions-item label="卖货应收">{{showMsg.salePrice}}</el-descriptions-item>
                    <el-descriptions-item label="卖货实收"
                        v-if="operationList.includes('editActualValuePrice')">{{showMsg.saleRealPrice}}</el-descriptions-item>
                    <el-descriptions-item label="项目实收"
                        v-if="operationList.includes('editActualValuePrice')">{{showMsg.blindRealPrice +
                        showMsg.saleRealPrice}}</el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <el-divider></el-divider>
        <div class="show_batch">
            <el-table :data="batchList" max-height="200" style="width: 70%;">
                <el-table-column prop="projectBatchId" label="批次号" width="180">
                </el-table-column>
                <el-table-column prop="arrivalTime" label="到货日期" width="280">
                </el-table-column>
                <el-table-column prop="arrivalStatus" label="到货状态" width="280">

                </el-table-column>
                <el-table-column prop="arrivalRate" label="到货百分比" width="280">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import APIProject from "@/api/apiProject";
import APISysLabel from "@/api/apiSysLabel";
import APIAdmin from "@/api/apiCompanyUser";
export default {
    name: "BusinessMsgCom",
    props: {
        projectId: Number,
        operationList: Array,
        isChange: Boolean,
        showNum: Number,
    },
    watch: {
        showNum: {
            handler (newVal, oldVal) {
                this.getMsg()
            },
            deep: true
        },
        projectId: {
            handler (newVal, oldVal) {
            },
            deep: true
        },
    },
    created(){
        // this.getMsg()
    },
    activated() {
        this.userInfo = JSON.parse(localStorage.getItem("mujinguserInfo"))
    },
    data() {
        return {
            userInfo: {},
            hasArrivalRate:0,
            batchList: [],
            showMsg: {},
            projectName: null,
            name: null,
            brands: null,
            brandsUsername: null,
            productName: null,
            cateIdList: null,
            areaIds: null,
            bussinessUsername: null,
            permissionUsername: null,
            invoiceCompany: null,
            invoicePrice: null,
            goodArrivalStatus: null,
            goodArrivalMsg: null,
            //arrivalTime: null,
            cateList: [],
            areaList: [],
            bussinessUserList: [],
            permissionUserList: [],
            invoiceCompanyList: [],
            actualValuePrice: null,
            executionProgressList: [],
            arrivalProgressList: [],
            arrivalWarehouseList: [],
            executionProgressId: null,
            arrivalProgressId: null,
            arrivalWarehouseId: null,
        };
    },
    methods: {
        getSysLabelList() {
            const params = {
                token: this.$store.state.token,
                sysLabelIds: "2,3,7,12,13,14,18",
            };
            APISysLabel.getSysLabelValueManageList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    if(res.data){
                        this.cateList = res.data[2]
                        this.areaList = res.data[3]
                        this.bussinessUserList = res.data[7]
                        this.executionProgressList = res.data[12]
                        this.arrivalProgressList = res.data[13]
                        this.arrivalWarehouseList = res.data[14]
                        this.invoiceCompanyList = res.data[18]
                        if(this.showMsg && this.showMsg.invoiceCompany){
                            this.invoiceCompanyList.forEach(item => {
                                if(item.id == parseInt(this.showMsg.invoiceCompany)){
                                    this.showMsg.invoiceCompanyName = item.sysValueName
                                }
                            })
                        }
                        if(this.showMsg && this.showMsg.executionProgressId){
                            this.executionProgressList.forEach(item => {
                                if(item.id == parseInt(this.showMsg.executionProgressId)){
                                    this.showMsg.executionProgressName = item.sysValueName
                                }
                            })
                        }
                        if(this.showMsg && this.showMsg.arrivalProgressId){
                            this.arrivalProgressList.forEach(item => {
                                if(item.id == parseInt(this.showMsg.arrivalProgressId)){
                                    this.showMsg.arrivalProgressName = item.sysValueName
                                }
                            })
                        }
                        if(this.showMsg && this.showMsg.arrivalWarehouseId){
                            this.arrivalWarehouseList.forEach(item => {
                                if(item.id == parseInt(this.showMsg.arrivalWarehouseId)){
                                    this.showMsg.arrivalWarehouseName = item.sysValueName
                                }
                            })
                        }
                        this.showMsg = JSON.parse(JSON.stringify(this.showMsg))
                    }
                }
            });
        },
        getPermissionUserList() {
            const params = {
                token: this.$store.state.token,
                roleId: "50,51",
            };
            APIAdmin.adminUserList(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    this.permissionUserList = res.list
                }
            });
        },
        getMsg() {
            this.tableLoading = true;
            const params = {
                token: this.$store.state.token,
                projectId: this.projectId,
            };
            APIProject.getProjectManageMsg(params).then((res) => {
                if (res.key === 1000) {
                    res = res.result;
                    let data = res.data
                    if (data.checkTime) {
                        data.checkDate = this.formatterTime(data.checkTime)
                    }
                    if (data.createTime) {
                        data.createDate = this.formatterTime(data.createTime)
                    }
                    if (data.failTime){
                        data.failDate = this.formatterTime(data.failTime)
                    }
                    if(data.cateIds){
                        let list = []
                        let cateIdList = data.cateIds.split(",")
                        cateIdList.forEach(item => {
                            list.push(parseInt(item))
                        })
                        data.cateIdList = list
                    }
                    if (data.areaId) {
                        let list = []
                        let idList = data.areaId.split(",")
                        idList.forEach(item => {
                            list.push(parseInt(item))
                        })
                        data.areaIds = list
                    }
                    if(data.projectBatchListbatchList){
                        if(data.projectBatchListbatchList.length > 0){                        
                        this.batchList = data.projectBatchListbatchList
                        this.batchList.forEach(item => {
                                if(item.arrivalTime != null){
                                    item.arrivalTime = this.formatterTime(item.arrivalTime)
                                }
                            })
                            
                        }
                    }
                    
                    this.batchList = data.projectBatchListbatchList;
                    this.showMsg = JSON.parse(JSON.stringify(data));
                    this.projectName = data.projectName
                    this.name = data.name
                    this.brands = data.brands
                    this.brandsUsername = data.brandsUsername
                    this.productName = data.productName
                    this.cateIdList = data.cateIdList
                    this.areaIds = data.areaId ? parseInt(data.areaId) : null
                    this.bussinessUsername = data.bussinessUsername
                    this.permissionUsername = data.permissionUsername
                    this.invoiceCompany = data.invoiceCompany ? parseInt(data.invoiceCompany) : null
                    this.invoicePrice = data.invoicePrice
                    this.goodArrivalStatus = data.goodArrivalStatus
                    this.goodArrivalMsg = data.goodArrivalMsg
                    this.actualValuePrice = data.actualValuePrice
                    this.executionProgressId = data.executionProgressId ? parseInt(data.executionProgressId) : null
                    this.arrivalProgressId = data.arrivalProgressId ? parseInt(data.arrivalProgressId) : null
                    this.arrivalWarehouseId = data.arrivalWarehouseId ? parseInt(data.arrivalWarehouseId) : null
                    this.hasArrivalRate = data.arrivalRate <= 0 ? 0 : data.arrivalRate
                    this.getSysLabelList()
                    this.getPermissionUserList()
                }
            });
        },
        formatterTime(time) {
            return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
    }
};
</script>
<style scoped>
.el-input-number{
    width: 250px !important;
}
.show_project{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    width: 100%;
}
.show_project_msg{
    width: 90%;
}

.show_batch{
    margin-top: 20px;
    margin-left: 82px;
    width: 100%;
    height: 200px;
}
</style>
<style lang="sass" scoped>
.order-cost-form
    background-color: white
    .cost_item_solid
        border-bottom: 1px solid #e3e3e3
    .cost_item
        width: 95%
        display: flex
        .adjustOrderItem
            margin: 20px auto
            padding-left: 40px
            display: flex
            width: 100%
            .adjustOrderItem_left
                width: 100px
                margin: 11px auto
            .adjustOrderItem_right
                width: 80%
                .show_text
                    margin: 11px auto
    .cost-footer
        padding-left: 100px
        padding-top: 50px
</style>